<template>
  <div class="jay-desktop-taskbar-item" @click.prevent="onClick">
    <template v-if="iconType === 'img'">
      <img :src="icon" :alt="label" class="jay-desktop-taskbar-item-img">
    </template>
    <template v-else>
      <i class="iconfont jay-desktop-taskbar-item-iconfont" :class="icon"></i>
    </template>
  </div>
</template>

<script>
  export default {
    name: "TaskbarItem",
    props:{
      iconType:{
        type: String,
        required:true
      },
      icon:{
        type: String,
        required:true
      },
      label:{
        type: String,
        required:true
      },
      id:{
        type: String,
        required:true
      }
    },
    methods:{
      onClick(){
        this.$store.commit('app/TOGGLE_APP_VISIBILITY',this.id)
      }
    }
  }
</script>

<style lang="scss">
  $iconfont-size: 20px;
  $hover-background-color:#272727;
  .jay-desktop-taskbar-item{
    width: 48px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    &:hover{
      background-color: $hover-background-color;
    }
    &-img{
      width: 32px;
      height: 32px;
    }
    &-iconfont{
      font-size: $iconfont-size;
      color: #ffffff;
    }
  }
</style>